<script setup lang="ts">
import { ref, watch } from "vue";
import { onLoad, onPageScroll, onPullDownRefresh, onReachBottom } from "@dcloudio/uni-app";
import { useInfiniteScroll } from "@/composables/useInfiniteScroll";
import { getListByUser, cancelActivity, type ActivityInfo } from "@/api/activity";
import { handleToPage } from "@/utils";

const { items: list, isLoading, hasMore, error, resetAndLoad, loadMore } = useInfiniteScroll<ActivityInfo>(getListByUser);

const tabs = [
  { key: '', label: '全部活动'},
  { key: '0', label: '待审核'},
  { key: '1', label: '待参加'},
  { key: '2', label: '已完成'},
  { key: '3', label: '已取消'},
  { key: '4', label: '已拒绝'}
];
/** 查询参数  */
const queryParams = ref({
  status: ''
});

watch(queryParams, (newQueryParams) => {
  console.log("Query Params changed:", newQueryParams);
  resetAndLoad(newQueryParams);
}, { deep: true });

// 页面加载
onLoad(() => {
  resetAndLoad(queryParams.value);
});

// 监听用户下拉动作
onPullDownRefresh(() => {
  resetAndLoad(queryParams.value).finally(() => {
    // 停止当前页面下拉刷新
    uni.stopPullDownRefresh();
  });
});

// 页面滚动到底部的事件
onReachBottom(() => loadMore());

/** 取消活动 */
function handleApplyCancel(id: number){
  uni.showModal({
		  title:'提示',
			content:'确认取消活动 ?',
			success: async({confirm}) => {
				if(confirm) {
          await cancelActivity({id});
          // 取消成功，手动删除列表项
          const idx = list.value.findIndex(item=>item.id==id);
          list.value.splice(idx,1);
          uni.showToast({ title: '取消成功', icon:'none' });
        }
			}
	})
}

// 吸顶变色
const isScrolled = ref(false);
onPageScroll((e)=>{
  isScrolled.value = e.scrollTop > 0;
});
</script>
<template>
<view class="relative overflow-hidden">
  <page-navbar title="我的活动" :hideTitle="true" :isScrolled="isScrolled"></page-navbar>

  <page-title title="我的活动"></page-title>

  <view class="my-1 overflow-x-auto scrollbar-hide">
    <view class="w-fit flex gap-2 p-4">
      <view
        class="rounded-full px-3 py-1 box-border break-keep text-sm"
        :class="[queryParams.status == item.key ? 'text-white bg-gradient-to-r from-#5199F9 to-#0164E6' : 'text-black/80 bg-white border-(~ solid black/8)']"
        v-for="(item, index) in tabs" :key="index"
        @click="queryParams.status = item.key"
      >
        {{ item.label }}
      </view>
    </view>
  </view>

  <page-list :list="list" :hasMore="hasMore" :isLoading="isLoading" :loadMore="loadMore">
    <view class="grid gap-5">
      <view class="bg-white rounded-lg p-3 mx-4 grid gap-2 intrinsic-h-80" v-for="item in list" :key="item.id" @click="handleToPage(`/pages/activity/detail?id=${item.id}`)">
        <image class="w-full h-45 align-middle rounded-md" :src="`https://api.minglvtang.com${item.imgs}`" :fade-in="true" :lazy-load="true" mode="widthFix" />
        <view class="text-(sm black/80) font-500 truncate">{{ item.title }}</view>
        <view class="text-(sm black/60) line-clamp-2" @click="handleApplyCancel(item.id)">{{ item.desc }}</view>
        <view class="text-(sm black/60) pt-2 border-t-(~ solid black/8)">{{item.start_time}} · {{item.city}} · {{ item.price == 0 ? '免费' : item.price }}</view>
      </view>
    </view>
  </page-list>
</view>
</template>
